<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>校园帮-发布</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="../libs/mui/mui.css" />
		<link rel="stylesheet" href="../libs/iconfont/fonts/iconfont.css"/>
		<link rel="stylesheet" type="text/css" href="../css/main.css"/>
		<link rel="stylesheet" type="text/css" href="../css/imageviewer.css"/>
		<link href="../libs/map/mui.picker.css" rel="stylesheet" />
		<link href="../libs/map/mui.poppicker.css" rel="stylesheet" />
		<link href="../libs/time/mui.picker.min.css" rel="stylesheet" />
		<style>
			.mui-content{font-size: 16px;}
			textarea{width: 100%!important;border: none;margin: 0;display: -webkit-box;padding: 0px 15px!important;}
			.bbs-pulish-img{background: white;display: -webkit-box;width: 100%;padding: 0 15px;}
			.bbs-pulish-img>img {width: 75px;height: 70px;max-height: 100px;padding: 5px;}
			.notes{
				width: 80%;
				margin-left: 15px;
				color: #C0C0C0;
			}
			 /*支付密码弹窗 start*/
			
			.password-of-pay-wraper {
			  display: none;
			  width: 80%;
			  height: 180px;
			  background-color: #fff;
			  position: fixed;
			  left: 10%;
			  top: 50%;
			  margin-top: -90px;
			  border-radius: 5px;
			  z-index: 1002;
			}
			
			#password_backdrop {
			  position: fixed;
			  z-index: 999;
			  top: 0;
			  right: 0;
			  bottom: 0;
			  left: 0;
			  -webkit-transition-duration: 400ms;
			  -moz-transition-duration: 400ms;
			  transition-duration: 400ms;
			  opacity: 1;
			  -webkit-opacity: 1;
			  -moz-opacity: 1;
			  -khtml-opacity: 1;
			  filter: alpha(opacity=100);
			  background: rgba(0, 0, 0, .4);
			  display: none;
			}
			
			.password-of-pay-top {
			  width: 100%;
			  height: 35px;
			  line-height: 35px;
			  text-align: center;
			  color: #757575;
			  border-bottom: 1px solid #e1e1e1;
			  position: relative;
			}
			
			.password-of-pay-top .close-btn {
			  width: 28px;
			  height: 28px;
			  line-height: 28px;
			  text-align: center;
			  position: absolute;
			  top: 4px;
			  left: 10px;
			  font-size: 16px;
			}
			
			.password-of-pay-body {
			  width: 100%;
			  padding-top: 40px;
			}
			
			.password-of-pay-body form {
			  width: 210px;
			  background-color: #f30;
			  margin: 0 auto;
			  position: relative;
			}
			
			.password-of-pay-body input[type="password"] {
			  float: left;
			  width: 35px;
			  height: 35px;
			  line-height: 35px;
			  text-align: center;
			  font-size: 24px;
			  padding: 0;
			  margin: 0;
			  border-radius: 0;
			}
			
			.password-of-pay-body form input[type="password"]+ input[type="password"] {
			  border-left: 0;
			}
			
			
			/*支付密码弹窗 end*/ 
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">发布需求</h1>		
			<a class="mui-pull-right mui-icon"><h5 class="release">发布</h5></a>
		</header>
		<div class="mui-content">
			<div class="Flea">
				<ul class="mui-table-view">
					<li class="mui-input-row">
						<label>主  题：</label> 
						<input type="text" class="campus_title" placeholder="请输入需求标题(2~12字符)"/>
					</li>
				</ul>
				<ul class="mui-table-view" >
					<li class="mui-input-row mui-navigate-right" data-options='{"type":"time"}'>
						<label>服务时间：</label>
						<input type="text" data-options='{}' class="btn ui-alert result campus_datatime" placeholder="请选择时间"/>
						<!--<div id='result' class="ui-alert"></div>-->
					</li>
				</ul>
				<ul class="mui-table-view">
					<li class="mui-input-row">
						<label>服务费用：</label>
						<input type="number" class="campus_price" placeholder="1000元以下的整数"/>
					</li>
				</ul>
				<ul class="mui-table-view">
					<li class="mui-input-row">
						<span class="notes">*服务费用含商品费用和服务费用*</span>
					</li>
				</ul>
				<ul class="mui-table-view">
					<li class="mui-input-row" id='showCityPicker3'>
						<label>地  点：</label>
						<input type="text" class="campus_place" placeholder="请输入地址" class="ui-alert" id='cityResult3'/>
					</li>
				</ul>
				<ul class="mui-table-view">
					<li class="mui-input-row">
						<label>详细地址：</label>
						<input type="text" class="campus_address" placeholder="请输入详细地点"/>
					</li>
				</ul>
				<ul class="mui-table-view">
					<li class="mui-input-row">
						<label>联 系 人：</label>
						<input type="text" class="campus_lxr" placeholder="请输入联系人姓名"/>
					</li>
				</ul> 
				<ul class="mui-table-view">
					<li class="mui-input-row">
						<label>联系电话：</label>
						<input type="number" class="campus_tel" placeholder="请输入联系人电话"/>
					</li>
				</ul>
				<ul class="mui-table-view">
					<li class="mui-input-row">
						<label id="W100">详细需求：</label>
						<textarea name="" rows="5" cols="" class="campus_xq" placeholder="请输入问题补充"></textarea>
					</li>
				</ul>
				<ul class="mui-table-view">
					<li class="mui-input-row">
						<label id="W100">添加图片：</label>
						<div class="bbs-pulish-img zhangshipic">
							<img src="../doc/jia.jpeg" class="mobilepic" data-pic="zhangshipic" title="添加相片"/>
						</div>
					</li>
				</ul>	
				
			</div>
		</div>
		<!--/*支付密码弹窗 start*/-->
		<div class="password-of-pay-wraper" id="j_password_of_pay">
			<div class="password-of-pay-top">
				<p>请输入支付密码</p>
				<div class="close-btn" id="j_close_tn">X</div>
			</div>
			<div class="password-of-pay-body">
				<form action="#" class="mui-clearfix">
					<input type="password" id="pwd1" maxlength="1" />
					<input type="password" id="pwd2" maxlength="1" />
					<input type="password" id="pwd3" maxlength="1" />
					<input type="password" id="pwd4" maxlength="1" />
					<input type="password" id="pwd5" maxlength="1" />
					<input type="password" id="pwd6" maxlength="1" />
				</form>		
			</div>
		</div>
		<div id="password_backdrop"></div>
		<!--弹窗-->
		<script src="../js/mui.js"></script>
		<script src="../js/open.js"></script>
		<script src="../libs/jquery/jquery.js"></script>
		<script src="../libs/map/mui.picker.js"></script>
		<script src="../libs/map/mui.poppicker.js"></script>
		<script src="../libs/map/city.data.js" type="text/javascript" charset="utf-8"></script>
		<script src="../libs/map/city.data-3.js" type="text/javascript" charset="utf-8"></script>
		<script src="../libs/time/mui.picker.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.zoom.js"></script>
		<script src="../js/mui.previewimage.js"></script>
		<script src="../js/appconfig.js"></script>
		<script type="text/javascript" src="../js/web_js/public.js"></script>
		<script type="text/javascript" src="../js/web_js/campus_release.js"></script>
		<script type="text/javascript" src="../js/web_js/campus_pay.js" ></script>
		<script>
			mui.previewImage();
		</script>
		<script>
			(function($) {
				$.init();
				var result = $('.result')[0];
				var btns = $('.btn');
				btns.each(function(i, btn) {
					btn.addEventListener('tap', function() {
						var optionsJson = this.getAttribute('data-options') || '{}';
						var options = JSON.parse(optionsJson);
						var id = this.getAttribute('id');
						var picker = new $.DtPicker(options);
						picker.show(function(rs) {
							result.value =  rs.text;
							picker.dispose();
						});
					}, false);
				});
			})(mui);
			
			//点击支付密码弹窗的"关闭"按钮所处理业务
			$("#j_close_tn").on("tap",function (){
				toast("取消支付,发布失败！");
				$("#j_password_of_pay").hide();
				tool.shade().hide();
				$('.popover').fadeOut();
				$('#password_backdrop').css("display","none");
			});
		</script>
		<script>
		(function($, doc) {
			$.init();
			$.ready(function() {					
				//-----------------------------------------
				//					//级联示例
				var cityPicker3 = new $.PopPicker({
					layer: 3
				});
				cityPicker3.setData(cityData3);
				var showCityPickerButton = doc.getElementById('showCityPicker3');
				var cityResult3 = doc.getElementById('cityResult3');
				showCityPickerButton.addEventListener('tap', function(event) {
					cityPicker3.show(function(items) {
						cityResult3.value = (items[0] || {}).text + " " + (items[1] || {}).text + " " + (items[2] || {}).text;
						//返回 false 可以阻止选择框的关闭
						//return false;
					});
				}, false);
			});
		})(mui, document);
	</script>
		
	</body>
</html>